<template>
  <div class="app_container">
    <el-card>
      <div slot="header" class="clearfix">
        <!-- <el-button type="primary" @click="handleAdd">&emsp;新增&emsp;</el-button> -->
        <el-form
          :inline="true"
          :model="listQuery"
          ref="listQuery"
          class="demo-form-inline"
        >
          <el-form-item label="">
            <el-input
              type="text"
              v-model="listQuery.user_code"
              placeholder="用户ID"
              clearable=""
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="item" v-loading="listLoading">
        <el-table
          ref="dataList"
          :data="menuList"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="user_code" label="用户编号" width="120"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
          <el-table-column prop="head_picture" label="头像" width="80">
            <template slot-scope="scope">
              <el-popover placement="top" max-width="420" trigger="hover">
                <img :src="scope.row.head_picture" alt="" style="max-width: 200px;max-height: 200px">
                <img preview="9" :preview-text="`${scope.row.nickname}`" slot="reference" :src="scope.row.head_picture"
                     alt="" style="width: 50px;">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="cover" label="封面图" width="80">
            <template slot-scope="scope">
              <el-popover placement="top" max-width="420" trigger="hover">
                <img :src="scope.row.cover" alt="" style="max-width: 200px;max-height: 200px">
                <img preview="10" :preview-text="`${scope.row.nickname}`" slot="reference" :src="scope.row.cover" alt=""
                     style="width: 50px;">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" ></el-table-column>

          <el-table-column prop="img_arr" label="资源列表" width="558">
            <template slot-scope="scope">
              <div v-if="scope.row.type === 1" style="display:flex;justify-content:flex-start;flex-wrap:wrap;">
                <div v-for="(item,index) in scope.row.img_arr" :key="'资源'+index" style="margin-right:5px;">
                  <el-popover placement="top" max-width="420" trigger="hover">
                    <img :src="item.url" alt="" style="max-width: 200px;">
                    <img preview="11" :preview-text="`${scope.row.nickname}`" slot="reference" :src="item.url" alt=""
                         style="width: 100px;">
                  </el-popover>
                </div>
              </div>
              <div v-else>
                <div v-for="(item,index) in scope.row.img_arr" :key="'资源'+index">
                  <el-popover placement="top" max-width="420" trigger="hover">
                    <!-- <video :src="item.url" style="max-width: 200px;max-height: 200px"> -->
                    <!-- <video slot="reference" :src="item.url" style="width: 50px;"> -->
                    <video :src="item.url" style="max-width:200px" controls></video>
                    <video slot="reference" :src="item.url" autoplay muted style="width: 100px;"></video>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间" width="120"></el-table-column>
          <!-- <el-table-column prop="verify" label="审核状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 1" type="info">待机器审核</el-tag>
              <el-tag v-if="scope.row.type === 2" type="primary">待人工审核</el-tag>
              <el-tag v-if="scope.row.type === 3" type="success">人工审核成功</el-tag>
              <el-tag v-if="scope.row.type === 4" type="danger">人工审核失败</el-tag>
            </template>
          </el-table-column> -->

          <el-table-column label="操作" width="140px">
            <template slot-scope="scope">
              <!-- <el-button
                type="success"
                size="mini"
                icon="el-icon-success"
                @click="handlePass(scope.row)"
                plain
                >通过</el-button
              >
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-error"
                @click="handleRefuse(scope.row)"
                plain
                >拒绝</el-button
              > -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                plain
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.per_page"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
      @close="handleDialogClose('editRulesForm')"
    >
      <span style=""
      ><em style="font-style: normal; color: red">删除后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="titleMap[dialogStatus]"
    >
      <el-form
        :model="editRulesForm"
        :rules="editRulesFormRules"
        ref="editRulesForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="关系名称" prop="room_type_name">
          <el-input
            v-model="editRulesForm.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="editRulesForm.sort"
            placeholder="请输入排序"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="submitForm('editRulesForm')"
          >提交
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {deleteData} from "@/api/dynamics/dynamics";
import {listData} from "@/api/dynamics/dynamicsRefuse";

export default {
  data() {
    return {
      confirmBtn: false,

      dataIds: undefined,
      deleteDialogVisible: false,

      dialogStatus: "",
      // dialog的头部信息
      titleMap: {
        update: "编辑",
        create: "添加",
      },
      editRulesFormRules: {},
      dialogFormVisible: false,
      editRulesForm: {
        id: undefined,
        name: undefined,
        sort: undefined,
      },
      menuList: [],
      listQuery: {
        page: 1,
        per_page: 10,
        user_code: undefined,
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.per_page) {
        urlData = urlData + `per_page=${this.listQuery.per_page}`;
      }
      if (this.listQuery.user_code) {
        urlData = urlData + `&user_code=${this.listQuery.user_code}`;
      }
      listData(urlData).then((response) => {
        this.menuList = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;

        this.confirmBtn = false;
      });
    },
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleAdd() {
      this.resetForm("editRulesForm");
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleEdit(row) {
      this.editRulesForm.id = row.id;
      this.editRulesForm.name = row.name;

      this.editRulesForm.sort = row.sort;

      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
      this.editRulesForm = {
        id: undefined,
        name: undefined,
        sort: undefined,
      };
    },
    submitForm(formName) {
      if (this.confirmBtn) return;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmBtn = true;
          if (this.dialogStatus === "create") {
            let formData = new FormData();
            for (let item in this.editRulesForm) {
              this.editRulesForm[item] === undefined
                ? ""
                : formData.append(item, this.editRulesForm[item]);
            }

            postData(formData).then((response) => {
              if (response.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000,
                });
              } else {
                this.confirmBtn = false;
                this.$message({
                  message: response.message,
                  type: "error",
                });
              }
            });
          } else {
            let formData = new FormData();
            for (let item in this.editRulesForm) {
              this.editRulesForm[item] === undefined
                ? ""
                : formData.append(item, this.editRulesForm[item]);
            }
            postData(formData).then((response) => {
              if (response.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000,
                });
              } else {
                this.confirmBtn = false;
                this.$message({
                  message: response.message,
                  type: "error",
                });
              }
            });
          }
        } else {

          return false;
        }
      });
    },
    handlePass(row) {
      if (this.confirmBtn) return
      this.confirmBtn = true
      let formData = new FormData()
      formData.append('id', row.id)
      passData(formData).then(res => {
        if (res.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000,
          });
        } else {
          this.confirmBtn = false
        }
      })
    },
    handleRefuse(row) {
      if (this.confirmBtn) return
      this.confirmBtn = true
      let formData = new FormData()
      formData.append('id', row.id)
      refuseData(formData).then(res => {
        if (res.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000,
          });
        } else {
          this.confirmBtn = false
        }
      })
    },
    // 点击单个删除
    handleDelete(row) {
      this.dataIds = row.id;
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      if (this.confirmBtn) return;
      this.confirmBtn = true;
      /* let formData = new FormData()
            formData.append('id',this.dataIds) */
      let obj = {id: this.dataIds};

      deleteData(obj).then((response) => {
        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000,
          });
        } else {
          this.confirmBtn = false;
          this.$message({
            message: response.message,
            type: "error",
          });
        }
      });
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate(); // 清除整个表单的校验
      }
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
